<template>
	<div>
		<Card style="margin-bottom:10px" v-if="$store.state.superAdmin == 'true'">
			<el-select style="width:100%" v-model="museumId" @change="getBottomExhibitionHallDropDown" filterable>
            	<el-option
	              	v-for="item in museumList"
	              	:key="item.id"
	              	:label="item.name"
	              	:value="item.id">
	            </el-option>
          	</el-select>
		</Card>
  	<Card>
    	<div class="flexCSB">
    		<div>
		        <div style="display: flex;align-items: center;margin-bottom:10px">
		          	<p style="margin-right:10px">展品：</p>
		          	<el-select v-model="hallId" @change="change" filterable>
		            	<el-option value="-1" label="全部展品"></el-option>
		            	<el-option
			              	v-for="item in exhibitionHallList"
			              	:key="item.id"
			              	:label="item.name"
			              	:value="item.id">
		            	</el-option>
		          	</el-select>
		        </div>
		    </div>
		    <div style="display:flex">
			    <Button :disabled="chooseList.length == 0" @click="allShenhe1" type="primary" style="margin-right:10px">批量审核通过</Button>
			    <Button :disabled="chooseList.length == 0" @click="allShenhe2" type="warning" style="margin-right:10px">批量审核拒绝</Button>
			    <Button :disabled="chooseList.length == 0" @click="allDel" type="error">批量删除</Button>
			</div>
      	</div>
		<Table @on-selection-change="onSelect" class="table" :loading="loading1" highlight-row :columns="columns" :data="data1"></Table>
	    <Page
		show-total
	      	class="page"
	      	:total="total"
	      	:current.sync="current"
	      	show-elevator
	      	@on-change="changePage"
    	/>
    </Card>
</div>
</template>

<script>
  	export default {
    	data () {
      		return {
      			museumId: '',
      			museumList: [],
      			hallId: '',
      			exhibitionHallList: [],
      			loading1: false,
      			columns: [
      				{
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
      				{title: '昵称', key: 'nickName', align: 'center', minWidth: 170, fixed: 'left'},
        {title: '头像',
          key: 'headImg',
          align: 'center',
          minWidth: 150,
          render: (h, params) => {
            return h('img', {
              style: {
                width: '60px',
                marginTop: '6px',
                'border-radius': '50%'
              },
              attrs: {
                src: params.row.headImg
              }
            })
          }
        },
      				{ title: '评论内容', key: 'comment', align: 'center', minWidth: 300 },
      				{ title: '发布时间', key: 'gmtCreate', align: 'center', minWidth: 170 },
      				{ title: '审核状态', key: 'states2', align: 'center', minWidth: 150 },
      				{ title: '展品', key: 'exhibitsId2', align: 'center', minWidth: 150 },
      				{
			          title: '操作',
			          align: 'center',
			          width: 300,
			          fixed: 'right',
			          render: (h, params) => {
			            return h('div', [
			              h(
			                'Button',
			                {
			                  props: {
			                    type: 'success',
			                    disabled: params.row.states != '1'
			                  },
			                  style: {
			                    marginRight: '10px'
			                  },
			                  on: {
			                    click: () => {
			                      this.success(params)
			                    }
			                  }
			                },
			                '审核通过'
			              ),
			              h(
			                'Button',
			                {
			                  	props: {
			                    	type: 'warning',
			                     	disabled: params.row.states != '1'
			                  	},
			                  style: {
			                    marginRight: '10px'
			                  },
			                  on: {
			                    click: () => {
			                      this.fail(params)
			                    }
			                  }
			                },
			                '审核拒绝'
			              ),
			              h(
			                'Button',
			                {
			                  props: {
			                    type: 'error'
			                  },
			                  on: {
			                    click: () => {
			                      this.del(params)
			                    }
			                  }
			                },
			                '删除'
			              )
			            ])
			          }
			      }
      			],
      			data1: [],
      			total: 0,
      			current: 1,
      			exhibitsId: '',
      			chooseList: []

      		}
      	},
      	created () {
    		if (this.$store.state.superAdmin == 'true') {
      			this.getMuseumList()
    		} else {
      			this.museumId = this.$store.state.museumId
      			this.getBottomExhibitionHallDropDown()
    		}
  		},
      	methods: {
      		// 获取博物馆列表
		    getMuseumList () {
		      this.loading1 = true
		      this.$http('/stage/museum/getAppMuseumDropDown', {}, 'post', res => {
		        if (res.data.code == 200) {
		          this.museumList = res.data.data
		          for (let i = 0; i < this.museumList.length; i++) {
		            if (this.museumList[i].name.length > 20) {
		              this.museumList[i].name =
		                this.museumList[i].name.slice(0, 20) + '...'
		            }
		          }
		          this.museumId = this.museumList[0].id
		          this.getBottomExhibitionHallDropDown()
		        } else {
		          this.$Message.error(res.data.msg)
		        }
		      })
		    },
		    // 获取展厅列表
    		getBottomExhibitionHallDropDown () {
		      this.$http(
		        '/stage/exhibits/getExhibitDropDown',
		        {
		          appMuseumId: this.museumId,
		          name: ''
		        },
		        'post',
		        res => {
		          if (res.data.code == 200) {
		            this.current = 1
		            this.hallId = '-1'
		            this.exhibitionHallList = res.data.data
		            this.getData()
		          } else {
		            this.$Message.error(res.data.msg)
		          }
		        }
		      )
		    },
		    change () {
		    	this.current = 1
		    	this.getData()
		    },
		    getData () {
		    	this.$http('/stage/exhibitComment/getExhibitsComment', {
		    		current: this.current,
		    		exhibitsId: this.hallId == -1 ? '' : this.hallId,
		    		size: this.size,
		    		appMuseumId: this.museumId
		    	}, 'post', res => {
		        if (res.data.code == 200) {
		        	this.loading1 = false
		        	this.chooseList = []
		        	this.data1 = res.data.data.records
		        	for (let i = 0; i < this.data1.length; i++) {
		        		if (this.data1[i].states == '1') {
		        			this.data1[i].states2 = '待审核'
		        		}
		        		if (this.data1[i].states == '2') {
		        			this.data1[i].states2 = '审核通过'
		        		}
		        		if (this.data1[i].states == '3') {
		        			this.data1[i].states2 = '审核拒绝'
		        		}
		        		for (let j = 0; j < this.exhibitionHallList.length; j++) {
		        			if (this.data1[i].exhibitsId == this.exhibitionHallList[j].id) {
		        				this.data1[i].exhibitsId2 = this.exhibitionHallList[j].name
		        			}
		        		}
		        	}
		        	this.total = res.data.data.total
		        } else {
		        	this.loading1 = false
		          	this.$Message.error(res.data.msg)
		        }
		      })
		    },
      		changePage (data) {
      			this.current = data
      			this.getData()
      		},
      		success (params) {
      			this.$Modal.confirm({
			        title: '提示',
			        content:
			          	'<p>确定要审核通过此评论吗？</p>',
			        	onOk: () => {
				          this.loading1 = true
				          this.$http(
				            '/stage/exhibitComment/authExhibitsComment',
				            {
				              exhibitsCommentId: params.row.id,
				              states: 2
				            },
				            'post',
				            res => {
				              if (res.data.code == 200) {
				              	this.loading1 = true
				                this.$Message.success('审核通过成功')
				                this.getData()
				              } else {
				                this.$Message.error(res.data.msg)
				              }
				            }
			          	)
			        },
			        onCancel: () => {}
		      	})
      		},
      		fail (params) {
      			this.$Modal.confirm({
			        title: '提示',
			        content:
			          	'<p>确定要审核拒绝此评论吗？</p>',
			        	onOk: () => {
				          this.loading1 = true
				          this.$http(
				            '/stage/exhibitComment/authExhibitsComment',
				            {
				              exhibitsCommentId: params.row.id,
				              states: 3
				            },
				            'post',
				            res => {
				              if (res.data.code == 200) {
				              	this.loading1 = true
				                this.$Message.success('审核拒绝成功')
				                this.getData()
				              } else {
				                this.$Message.error(res.data.msg)
				              }
				            }
			          	)
			        },
			        onCancel: () => {}
		      	})
      		},
      		del (params) {
      			this.$Modal.confirm({
			        title: '提示',
			        content:
			          	'<p>确定要删除此评论吗？</p>',
			        	onOk: () => {
				          this.loading1 = true
				          this.$http(
				            '/stage/exhibitComment/deleteExhibitsComment',
				            {
				              id: params.row.id
				            },
				            'get',
				            res => {
				              if (res.data.code == 200) {
				              	this.loading1 = true
				                this.$Message.success('删除成功')
				                this.current = 1
				                this.getData()
				              } else {
				                this.$Message.error(res.data.msg)
				              }
				            }
			          	)
			        },
			        onCancel: () => {}
		      	})
      		},
      		onSelect (data) {
      			this.chooseList = data
      		},
      		allShenhe1 () {
      			let commentIds = []
      			for (let i = 0; i < this.chooseList.length; i++) {
      				commentIds.push(this.chooseList[i].id)
      			}
      			this.$Modal.confirm({
			        title: '提示',
			        content:
			          	'<p>确定要批量审核通过评论吗？</p>',
			        	onOk: () => {
				          this.$http(
				            '/stage/exhibitComment/batchAuthExhibitsComment',
				            {
				              commentIds: commentIds,
				              states: 2
				            },
				            'post',
				            res => {
				              if (res.data.code == 200) {
				              	this.loading1 = true
				                this.$Message.success('审核成功')
				                this.getData()
				              } else {
				                this.$Message.error(res.data.msg)
				              }
				            }
			          	)
			        },
			        onCancel: () => {}
		      	})
      		},
      		allShenhe2 () {
      			let commentIds = []
      			for (let i = 0; i < this.chooseList.length; i++) {
      				commentIds.push(this.chooseList[i].id)
      			}
      			this.$Modal.confirm({
			        title: '提示',
			        content:
			          	'<p>确定要批量审核拒绝评论吗？</p>',
			        	onOk: () => {
				          this.$http(
				            '/stage/exhibitComment/batchAuthExhibitsComment',
				            {
				              commentIds: commentIds,
				              states: 3
				            },
				            'post',
				            res => {
				              if (res.data.code == 200) {
				              	this.loading1 = true
				                this.$Message.success('审核成功')
				                this.getData()
				              } else {
				                this.$Message.error(res.data.msg)
				              }
				            }
			          	)
			        },
			        onCancel: () => {}
		      	})
      		},
      		allDel () {
      			let ids = []
      			for (let i = 0; i < this.chooseList.length; i++) {
      				ids.push(this.chooseList[i].id)
      			}
      			this.$Modal.confirm({
			        title: '提示',
			        content:
			          	'<p>确定要批量删除此评论吗？</p>',
			        	onOk: () => {
				          this.loading1 = true
				          this.$http(
				            '/stage/exhibitComment/batchDeleteExhibitsComment',
				            {
				              ids: ids
				            },
				            'post',
				            res => {
				              if (res.data.code == 200) {
				              	this.loading1 = true
				                this.$Message.success('删除成功')
				                this.current = 1
				                this.getData()
				              } else {
				                this.$Message.error(res.data.msg)
				              }
				            }
			          	)
			        },
			        onCancel: () => {}
		      	})
      		}

      	}
}
</script>

<style scoped></style>
